import React, { Component } from 'react';
class App extends Component {
  // 01，定义  state 数据
  state = {
    // 要渲染的列表数据
    list: [
      {
        title: "学习react",
        done: false
      },
      {
        title: "学习uni-app",
        done: false
      },
      {
        title: "学习vue",
        done: true
      },
    ],
    // input的值
    title: "",
    Arr1: {
      num: 11
    },
    Arr2: {
      numbersuan: "+",
      left: 2,
      right: 4,
      result: 6
    },
    // 步行器数值value
    Walkervalue: 1
  }
  // 事件函数
  // #region
  // 添加
  addList() {
    // 定义list
    const list = this.state.list;
    // 新数据添加到list
    list.push({
      title: this.state.title,
      done: false
    })
    // 清空输入框
    this.state.title = "";
    // 刷新list数据
    this.setState({ list });
  }
  // 删除
  removeList(item) {
    const list = this.state.list;
    // 获取当前数据在总数据里的下标
    const index = list.findIndex(i => i.title == item.title);
    // 根据获取的下标进行删除
    list.splice(index, 1);
    // 刷新list数据
    this.setState({ list });
  }
  // 更新状态
  updataDone(item, checked) {
    // 定义list
    const list = this.state.list;
    // 获取当前数据在总数据里的下标
    const index = list.findIndex(i => i.title == item.title);
    // 根据获取的下标进行修改数据
    list[index].done = checked;
    // 刷新list数据
    this.setState({ list });
  }
  // #endregion

  // 实现按钮点一次 加1
  addNum() {
    this.state.Arr1.num += 1;
    this.setState({})
  }

  //计算器 
  // #region
  count() {
    const suan = this.state.Arr2.numbersuan
    if (suan == "+") {
      this.state.Arr2.result = Number(this.state.Arr2.left) + Number(this.state.Arr2.right)
    } else if (suan == "-") {
      this.state.Arr2.result = Number(this.state.Arr2.left) - Number(this.state.Arr2.right)
    } else if (suan == "*") {
      this.state.Arr2.result = Number(this.state.Arr2.left) * Number(this.state.Arr2.right)
    } else if (suan == "/") {
      this.state.Arr2.result = Number(this.state.Arr2.left) / Number(this.state.Arr2.right)
    }
    this.setState({})
  }

  // 更新运算符
  valsel(e) {
    this.state.Arr2.numbersuan = e.target.value
    this.setState({})
  }
  // 左输入框
  levalue(value) {
    this.state.Arr2.left = Number(value)
    this.setState({})
  }
  // 右输入框
  rivalue(value) {
    this.state.Arr2.right = Number(value)
    this.setState({})
  }
  // #endregion


  // 步行器
  Walker(val) {
    if (val == 1) {
      if (this.state.Walkervalue == 1) {
        return
      }
      this.state.Walkervalue -= 1
      this.setState({})
    } else {
      this.state.Walkervalue += 1
      this.setState({})
    }
  }

  render() {
    // 已完成
    const doneList = this.state.list.filter(item => item.done);
    // 未完成
    const updoneList = this.state.list.filter(item => !item.done);

    return (
      <div className='content'>
        {/* todolist */}
        <div className="top">
          <h1>1，todolist美妙清单</h1>
          <div className='add'>
            
            <input type="text" value={this.state.title} onChange={e => this.setState({ title: e.target.value })} />


            <button onClick={this.addList.bind(this)}>添加</button>
          </div>
          <div className='false'>
            <h3>未完成({updoneList.length})</h3>
            <ul>
              {
                updoneList.map((item, index) =>
                  <li key={index}>
                    <input type="checkbox" checked={item.done} onChange={(e) => this.updataDone(item, e.target.checked)} />
                    <span>{item.title}</span>
                    <button onClick={(e) => this.removeList(item)}>删除</button>
                  </li>
                )
              }
            </ul>
          </div>
          <div className='true'>
            <h3>已完成({doneList.length})</h3>
            <ul>
              {
                doneList.map((item, index) =>
                  <li key={index}>
                    <input type="checkbox" checked={item.done} onChange={(e) => this.updataDone(item, e.target.checked)} />
                    <span>{item.title}</span>
                    <button onClick={(e) => this.removeList(item)}>删除</button>
                  </li>
                )
              }
            </ul>
          </div>
        </div>
        {/* 实现按钮点一次 加1 */}
        <div className="conter">
          <h1>2，实现按钮点一次 加1</h1>
          <input type="text" value={this.state.Arr1.num} />
          <button onClick={this.addNum.bind(this)}>点击+1</button>
        </div>

        {/* 计算器 */}
        <div className="numbersuan">
          <h1>3，计算器</h1>
          <input type="number" value={this.state.Arr2.left} onChange={(e) => this.levalue(e.target.value)} />
          <select value={this.state.Arr2.numbersuan} onChange={(e) => this.valsel(e)}>
            <option value="+">+</option>
            <option value="-" >-</option>
            <option value="*">×</option>
            <option value="/">÷</option>
          </select>
          <input type="number" value={this.state.Arr2.right} onChange={(e) => this.rivalue(e.target.value)} />
          <button onClick={() => this.count()}>=</button>
          <span>{this.state.Arr2.result}</span>
        </div>

        {/* 步行器 */}
        <div className="bottom">
          <h1>4，步行器</h1>
          <button onClick={() => this.Walker(1)}>-</button>
          <button>{this.state.Walkervalue}</button>
          <button onClick={() => this.Walker(2)}>+</button>
        </div>
      </div>
    );
  }
}

export default App;
